<template>
  <div class="flex flex-column height prescriptionList">
    <header-top
      class="head"
      ref="header"
      :TxtHeader="TxtHeader"
      @leftClick="back"
      @rightClick="goIndex"
    ></header-top>
    <div class="content_main">
      <div class="cont_top">
        <div class="gdImg">
          <img src="./image/icon_yellow.png" />
        </div>
        <div class="top_main">
          <div class="top_title">问诊信息</div>
          <div class="top_list">
            <div class="list_title">就诊人</div>
            <div class="list_job">
              <span>范丽丽</span>
              <span>女</span>
              <span>28岁</span>
            </div>
          </div>
          <div class="top_list">
            <div class="list_title">就诊科室</div>
            <div class="list_job">
              <span>内科</span>
            </div>
          </div>
          <div class="top_list">
            <div class="list_title">就诊时间</div>
            <div class="list_job">
              <span>2020-09-15</span>
              <span>13:32:09</span>
            </div>
          </div>
        </div>
      </div>
      <div class="con_main">
        <div class="main_title">诊断</div>
        <div class="main_content">上呼吸道感染</div>
      </div>
      <div class="con_drug">
        <div class="main_title">诊断</div>
        <div class="drug_content">
          <div class="drug_list">
            <div class="drug_num">
              <span>阿莫西林胶囊</span>
              <i> x 3</i>
            </div>
            <div class="drug_gg">
              <div class="gg_title">规格</div>
              <div class="gg_cont">0.5g*10粒*2板</div>
            </div>
            <div class="drug_ff">
              <div class="ff_title">服用方法</div>
              <div class="ff_cont">口服，一日三次，一次1粒</div>
            </div>
          </div>
          <div class="drug_list">
            <div class="drug_num">
              <span>999感冒灵颗粒</span>
              <i> x 5</i>
            </div>
            <div class="drug_gg">
              <div class="gg_title">规格</div>
              <div class="gg_cont">0.5g*10粒*2板</div>
            </div>
            <div class="drug_ff">
              <div class="ff_title">服用方法</div>
              <div class="ff_cont">口服，一日三次，一次1粒</div>
            </div>
          </div>
        </div>
      </div>
      <div class="con_main">
        <div class="main_title">补充说明</div>
        <div class="main_content">上呼吸道感染</div>
      </div>
      <div class="con_foot">
        <div class="foot_main">
          <div class="foot_title">签字盖章</div>
          <div class="foot_content">
            <div class="doctor">
              <div class="doctor_name">医生：</div>
              <div class="doctor_qm">张忠辉</div>
            </div>
            <div class="doctor">
              <div class="doctor_name">药师：</div>
              <div class="doctor_qm">李清照</div>
            </div>
          </div>
        </div>
        <div class="foot_image">
          <img src="./image/icon_yyyz.png" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import HeaderTop from "@/components/header-top";
export default {
  name: "prescriptionList",
  components: {
    HeaderTop
  },
  data() {
    return {
      TxtHeader: {
        //头部设置
        color: "#333", //头部中间文字颜色
        title: "处方单",
        leftOpt: {
          //左边按钮设置
          icon: "",
          text: "",
          color: "#333"
        },
        rightOpt: {
          //右边按钮设置
          icon: "",
          text: "?",
          color: "#333"
        }
      }
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
.prescriptionList {
  .head {
    background: #fff;
    border-bottom: 0.01rem solid #eee;
  }
  .content_main {
    height: calc(100% - 0.5rem);
    overflow-y: auto;
    .cont_top {
      position: relative;
      background: #fff;
      margin-bottom: 0.1rem;
      .gdImg {
        position: absolute;
        top: 0;
        right: 0;
        width: 1.01rem;
        img {
          width: 1.01rem;
          background-size: 100%;
        }
      }
      .top_main {
        padding: 0.15rem;
        .top_title {
          padding-left: 0.15rem;
          position: relative;
          font-size: 0.18rem;
          height: 0.25rem;
          line-height: 0.25rem;
          margin-bottom: 0.2rem;
        }
        .top_title::before {
          content: "";
          position: absolute;
          left: 0;
          top: 0.05rem;
          width: 0.05rem;
          height: 0.15rem;
          background: #08d6c6;
        }
        .top_list {
          display: flex;
          font-size: 0.14rem;
          margin-bottom: 0.1rem;
          .list_title {
            width: 0.6rem;
            margin-right: 0.6rem;
          }
          .list_job {
            flex: 1;
            span {
              display: inline-block;
              margin-right: 0.15rem;
            }
          }
        }
      }
    }
    .con_main {
      padding: 0.15rem;
      background: #fff;
      margin-bottom: 0.1rem;
      .main_title {
        padding-left: 0.15rem;
        position: relative;
        font-size: 0.18rem;
        height: 0.25rem;
        line-height: 0.25rem;
        margin-bottom: 0.2rem;
      }
      .main_title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.05rem;
        width: 0.05rem;
        height: 0.15rem;
        background: #08d6c6;
      }
      .main_content {
        font-size: 0.14rem;
        color: #333;
      }
    }
    .con_drug {
      padding: 0.15rem;
      background: #fff;
      margin-bottom: 0.1rem;
      .main_title {
        padding-left: 0.15rem;
        position: relative;
        font-size: 0.18rem;
        height: 0.25rem;
        line-height: 0.25rem;
        margin-bottom: 0.2rem;
      }
      .main_title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.05rem;
        width: 0.05rem;
        height: 0.15rem;
        background: #08d6c6;
      }
      .drug_content {
        .drug_list {
          margin-bottom: 0.15rem;
          border-bottom: 0.01rem solid #eee;
          .drug_num {
            font-size: 0.16rem;
            color: #333;
            margin-bottom: 0.15rem;
            span {
              margin-right: 0.15rem;
            }
          }
          .drug_gg {
            display: flex;
            font-size: 0.14rem;
            margin-bottom: 0.15rem;
            .gg_title {
              color: #666;
              width: 0.6rem;
              margin-right: 0.6rem;
            }
            .gg_cont {
              color: #333;
              flex: 1;
            }
          }
          .drug_ff {
            display: flex;
            font-size: 0.14rem;
            margin-bottom: 0.15rem;
            .ff_title {
              color: #666;
              width: 0.6rem;
              margin-right: 0.6rem;
            }
            .ff_cont {
              color: #333;
              flex: 1;
            }
          }
        }
        .drug_list:last-child {
          border: none;
        }
      }
    }
    .con_foot {
      padding: 0.15rem;
      background: #fff;
      margin-bottom: 0.1rem;
      display: flex;
      .foot_main {
        .foot_title {
          padding-left: 0.15rem;
          position: relative;
          font-size: 0.18rem;
          height: 0.25rem;
          line-height: 0.25rem;
          margin-bottom: 0.2rem;
        }
        .foot_title::before {
          content: "";
          position: absolute;
          left: 0;
          top: 0.05rem;
          width: 0.05rem;
          height: 0.15rem;
          background: #08d6c6;
        }
        .foot_content {
          font-size: 0.14rem;
          color: #333;
          .doctor {
            display: flex;
            margin-bottom: 0.17rem;
            color: #333;
            .doctor_name {
              font-size: 0.18rem;
              margin-right: 0.15rem;
            }
            .doctor_qm {
              font-size: 0.21rem;
            }
          }
        }
      }
      .foot_image {
        margin-left: auto;
        img {
          width: 0.8rem;
          background-size: 100%;
        }
      }
    }
  }
}
</style>
